import { useState } from 'react';
import { Form, Input, Button, Card, Typography, Divider } from 'antd';
import { useLocation, useNavigate } from 'react-router-dom';
import { useAuthStore } from '../../store/authStore';
import { LockOutlined, UserOutlined, BankOutlined } from '@ant-design/icons';
import { messageApi } from '../../utils/message';
import { useAuth } from '../../hooks/useAuth';

const { Title, Paragraph, Text } = Typography;

const Login = () => {
    const [loading, setLoading] = useState(false);
    const location = useLocation();
    const { login } = useAuth();

    const redirectPath = new URLSearchParams(location.search).get('redirect') || '/dashboard';

    const handleSubmit = async (values: { username: string; password: string }) => {
        setLoading(true);
        try {
            console.log('登录前获取的 redirectPath:', redirectPath);
            const success = await login(values, redirectPath);
            if (success) {
                console.log('登录成功，已触发跳转'); // 新增日志
            }
            messageApi.success('登录成功，正在跳转...', 2);
        } finally {
            setLoading(false);
        }
    };

    return (
        <div className="flex h-screen w-full">
            {/* 左侧品牌区：蓝色渐变背景，响应式垂直布局 */}
            <div className="flex-1 bg-gradient-to-br from-primary to-primaryDark p-0 md:p-12 flex items-center justify-center relative overflow-hidden">
                <div className="absolute inset-0  bg-pattern bg-repeat"></div>

                {/* 品牌内容 */}
                <div className="max-w-md z-10">
                    {/* Logo */}
                    {/* <div className="bg-white/10 w-20 h-20 rounded-xl flex items-center justify-center mb-5">
                        <BankOutlined className="text-4xl text-white" />
                    </div> */}

                    {/* 标题 - 使用 !important 确保优先级，或使用更具体的选择器 */}
                    <Title level={2} className="text-white mb-4 !text-white">
                        <BankOutlined className="text-3xl text-white" />百盈制衣管理系统</Title>

                    {/* 描述 */}
                    <Paragraph className="text-white/85 text-lg leading-relaxed mb-8">
                        高效、智能的校园信息化管理解决方案，<br />
                        助力教育机构数字化转型
                    </Paragraph>

                    {/* 特性列表 */}
                    <div className="space-y-4">
                        <div className="flex items-center">
                            <Text className="text-white">• 全面的校园资源管理</Text>
                        </div>
                        <div className="flex items-center">
                            <Text className="text-white">• 智能的数据分析系统</Text>
                        </div>
                        <div className="flex items-center">
                            <Text className="text-white">• 安全可靠的权限控制</Text>
                        </div>
                    </div>
                </div>
            </div>

            {/* 右侧登录区：灰色背景，居中卡片 */}
            <div className="w-full md:w-96 flex items-center justify-center bg-gray-50 p-6">
                <div className="w-full max-w-sm">
                    {/* 登录卡片 */}
                    <Card className="card-shadow border-0 p-6">
                        <div className="text-center mb-4">
                            <Title level={3} className="m-0">账户登录</Title>
                            <Text type="secondary">请输入账号信息登录系统</Text>
                        </div>

                        <Divider className="my-4" />

                        <Form
                            onFinish={handleSubmit}
                            layout="vertical"
                            initialValues={{ username: 'admin', password: '123456' }}
                        >
                            {/* 用户名输入 */}
                            <Form.Item
                                name="username"
                                label="用户名"
                                rules={[{ required: true, message: '请输入用户名' }]}
                            >
                                <Input
                                    placeholder="请输入用户名"
                                    autoComplete="username"
                                    prefix={<UserOutlined className="text-gray-400" />}
                                    size="large"
                                />
                            </Form.Item>

                            {/* 密码输入 */}
                            <Form.Item
                                name="password"
                                label="密码"
                                rules={[{ required: true, message: '请输入密码' }]}
                            >
                                <Input.Password
                                    placeholder="请输入密码"
                                    autoComplete="current-password"
                                    prefix={<LockOutlined className="text-gray-400" />}
                                    size="large"
                                />
                            </Form.Item>

                            {/* 登录按钮和链接 */}
                            <Form.Item className="mt-6">
                                <Button
                                    type="primary"
                                    htmlType="submit"
                                    loading={loading}
                                    className="w-full h-12 text-base btn-primary"
                                    size="large"
                                >
                                    登录
                                </Button>

                                <div className="flex justify-between mt-4">
                                    <a href="/forgot-password" className="text-primary hover:text-primaryDark text-sm hover:underline transition-colors">
                                        忘记密码?
                                    </a>

                                </div>
                            </Form.Item>
                        </Form>
                    </Card>

                    {/* 版权信息 */}
                    <div className="text-center mt-6 text-xs text-gray-500">
                        © 2023 校园管理系统 版权所有
                    </div>
                </div>
            </div>
        </div>
    );
};

export default Login;
